import React from 'react';
import { View, Text } from 'react-native';
import { Flex, Button, Modal } from 'antd-mobile-rn';
import RMCMultiPicker from 'rmc-picker/lib/MultiPicker';
import RMCPicker from 'rmc-picker/lib/Picker';
import constants from '../utils/constants';
import topView from 'rn-topview'



class TimerPopup extends React.Component {



    constructor(props) {
        super(props);
        this.state = {
            value: this.props.defaultValue ? this.props.defaultValue.map(i => { return [i + ''] }) : [[0], [0]],
            visible: true,
            dataList: [
                { name: "小时", data: [0,1,2,3,4,5,6].map(value=>{return {label:value+"",value:value}}) },
                { name: "分钟", data: [0,1,2,3,4,5,6,7,8,9,10,11].map(value=>{return {label:value*5+"",value:value*5}}) },
            ]
        }

        //   console.log("init", this.state);

    }

    _close = () => {
        this.setState({
            visible: false
        });
        if (this.props.onClose) {
            this.props.onClose();
        }
    }
    _onCancel = () => {

        this._close();


    }

    _onOk = () => {

        this._close();
        if (this.props.onOk) {
            this.props.onOk(this.state.value.map(v => { return parseInt(v[0]) }));
        }

    }



    render() {

        console.log("s", this.state, this.props)

        const dataList = this.state.dataList;

        return (

            <Modal visible={this.state.visible} popup={true} animationType="slide-up">
                <View>
                    <Flex style={{ height: 45, padding: 1 }}>
                        <Flex.Item>
                            <Button activeStyle={{ backgroundColor: "#ccc" }} style={{ borderRadius: 0, borderWidth: 0 }} onClick={this._onCancel}>
                                <Text style={{ color: constants.themeColor }}>取消</Text>
                            </Button>
                        </Flex.Item>
                        <Flex.Item>
                            <Button activeStyle={{ backgroundColor: "#ffffff" }} style={{ borderRadius: 0, borderWidth: 0 }}>
                                <Text style={{color:"#666"}}>{this.props.title ? this.props.title : "请选择"}</Text>
                            </Button>

                        </Flex.Item>
                        <Flex.Item >
                            <Button activeStyle={{ backgroundColor: "#ccc" }} style={{ borderRadius: 0, borderWidth: 0 }} onClick={this._onOk}>
                                <Text style={{ color: constants.themeColor }}>确定</Text>
                            </Button>
                        </Flex.Item>
                    </Flex>
                    <Flex style={{ padding: 15, borderTopColor: "#ddd", borderTopWidth: 1 }}>
                        {
                            dataList.map(item => {
                                return (
                                    <Flex.Item key={item.name} style={{ alignItems: "center" }} >
                                        <Text style={{ color: "#000", fontSize: 16 }}>{item.name}</Text>
                                    </Flex.Item>
                                )
                            })
                        }
                    </Flex>
                    <Flex>
                        {
                            dataList.map((item, index) => {
                                return (
                                    <Flex.Item key={index}>

                                        <RMCMultiPicker selectedValue={this.state.value[index]} onValueChange={(a, v) => {
                                            const newValue = this.state.value;
                                            newValue[index] = a;
                                            console.log(a, "aaa");
                                            this.setState({
                                                value: newValue
                                            })
                                        }}>
                                            <RMCPicker  >
                                                {
                                                    item.data.map((t, i) => {
                                                        return (
                                                            <RMCPicker.Item key={index + '-' + i} value={t.value}>{t.label}</RMCPicker.Item>
                                                        )
                                                    })
                                                }
                                            </RMCPicker>
                                        </RMCMultiPicker>
                                    </Flex.Item>
                                )
                            })
                        }
                    </Flex>
                </View>
            </Modal>



        )
    }
}

export default (title,defaultValue) => {
    return new Promise((resolve, reject) => {
        topView.set(
            <TimerPopup
                title={title}
                defaultValue={defaultValue}
                onClose={() => { topView.remove(); }}
                onOk={(value) => {
                    resolve(value);
                }}
            />
        )
    });
}